<template>
<rs-split class="sys-menu" type="vertical" :minSize="300" fixed>
    <div class="menu-tree" slot="first">
        <div class="header">菜单树</div>
        <RsScrollbar :top="36">
            <el-tree ref="menuTree" 
                :data="menus" 
                current-node-key="root" 
                :default-expanded-keys="['root']" 
                node-key="cdbh" 
                :props="defaultProps" 
                :expand-on-click-node="false" 
                :render-content="renderContent"
                @node-click="onTreeNodeClick">
            </el-tree>
        </RsScrollbar>
    </div>
    <div class="menu-wrap" slot="last">
        <div class="rs-toolbar">
            <el-button-group>
                <el-button type="primary" size="small" icon="rs-icon-add-circle-fill" @click="onAddMenu">新增</el-button>
                <el-button type="danger" size="small" icon="rs-icon-close-circle-fill" @click="onDeleteMenu" :disabled="disableDelBtn">删除</el-button>
                <el-button type="success" size="small" icon="rs-icon-save" @click="onSaveMenu" :disabled="disableSaveBtn">保存</el-button>
            </el-button-group>
        </div>
        <RsWrap :top="72" style="padding:20px 20px 2px;" :scrollY="true">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width:500px;">
                <el-form-item label="上级菜单" prop="pcdmc">
                    <el-input v-model="form.pcdmc" readonly></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="cdmc">
                    <el-input v-model="form.cdmc"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <RsIconPicker :icons="icons" v-model="form.icon"></RsIconPicker>
                </el-form-item>
                <el-form-item label="菜单类型" prop="cdlx">
                    <RsDict v-model="form.cdlx" dict="menuType" style="width:100%;"></RsDict>
                </el-form-item>
                <el-form-item label="排序号" prop="cdxh">
                    <el-input v-model.number="form.cdxh"></el-input>
                </el-form-item>
                <template v-if="isSubMenu == false">
                    <el-form-item label="菜单路径" prop="cdlj">
                        <el-input v-model="form.cdlj"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单状态" prop="sfhc">
                        <el-radio-group v-model="form.sfhc">
                        <el-radio :label="1">保持菜单状态</el-radio>
                        <el-radio :label="0">不保持菜单状态</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </template>
            </el-form>
        </RsWrap>
    </div>
</rs-split>
</template>
<script>
import tips from '../../mixin/tips'
import tree from './tree.js'
import icons from '@/utils/icons.js'
import menu from '@/api/menu'
export default {
    name:'MenuPage',
    mixins:[tips,tree],
    data(){
        return {
            tableHeight:0,
            selectRows:[],
            activeName:'menu',
            urls:[],
            loading:false,
            icons:icons,
            form:{
                pcdbh:'',
                pcdmc:'',
                pcdlj:'',
                cdbh:'',
                cdmc:'',
                cdlj:'',
                cdlx:0,
                icon:'',
                cdxh:0,
                sfhc:0
            },
            rules: {
                cdmc:[
                    {required: true, message: '请输入菜单名称'}
                ],
                icon:[
                    {required: true, message: '请选择图标'}
                ],
                cdlj:[
                    {required: true, message: '请输入菜单路径'}
                ],
                cdxh:[
                    {required: true, message: '请输入排序号'}
                ],
                cdlx:[
                    {required: true, message: '请输入排序号'}
                ],
                sfhc:[
                    {required: true, message: '请输入排序号'}
                ]
            }
        }
    },
    created(){
        this.loadMenuTree();
    },
    mounted(){
        this.initCurrentNode();
    },
    computed:{
        isSubMenu(){
            return this.form.cdlx == 0;
        },
        disableUrlBtn(){

            if( this.form.cdbh ){

                return this.form.cdlx === 0
            }
            return this.form.cdbh === 'root' || this.form.cdlx === 0
        },
        disableSaveBtn(){

            if( this.form.cdbh ){
                return this.form.cdbh && this.form.cdbh === 'root';
            }
            return false;
        },
        disableDelBtn(){
            return this.form.cdbh && this.form.cdbh === 'root'
        }
    },
    methods:{
        onAddMenu(){

            const { currentNode,form } = this;
            const parentData = currentNode.data;

            if( form.cdbh === '')
                return;            
            
            form.cdbh = '';
            form.cdmc = "";
            form.cdlj = "";
            form.cdlx = 0;
            form.pxh = 0;
            form.icon = '';
            form.pcdmc = parentData.cdmc;
            form.pcdlj = parentData.cdlj;
            form.pcdbh = parentData.cdbh;
        },
        onDeleteMenu(){

            const {currentNode} = this;
            menu.delMenu([currentNode.data.cdbh])
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.deleteNodeData(currentNode);
                }else{
                }
            }).catch(error => {
                this.loading = false;
            });             
        },
        onSaveMenu(){

            const { form } = this;
            if( form.cdbh === 'root')
                return;

            this.$refs.form.validate((valid)=>{

                if(valid){
                    this.saveMenu(form);
                }else{
                    return false;
                }
            })
        },
        saveMenu(form){

            if(form.cdlx === 0 ){
                form.cdlj = '/';
                form.sfhc = 0;
            }

            const menuData = {
                pcdbh:form.pcdbh,
                cdbh:form.cdbh,
                cdmc:form.cdmc,
                cdlj:form.cdlj,
                cdlx:form.cdlx,
                icon:form.icon,
                cdxh:form.cdxh,
                sfhc:form.sfhc
            }

            menu.saveMenu(menuData)
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    //this.loadMenuTree();
                    if(menuData.cdbh === ''){
                        menuData.cdbh = data.cdbh;
                        this.insertNodeData(this.currentNode,menuData);
                    }else{
                        this.saveNodeData(this.currentNode,menuData);
                    }
                    this.showInfo("操作成功！");
                }else{
                    this.showError(data.error_desc);
                }
            }).catch(error => {
                this.loading = false;
                //this.showError('网络错误，获取授权信息失败！');
            });
        }
    }
}
</script>